<template>
  <div class="app-container">
    <div v-if="enterStatus == 'enter'">
      <el-row>
        <el-col>
          <el-button icon="el-icon-arrow-left" type="text" @click="delRouter"
            >返回</el-button
          ><span>| 新增检查任务</span>
        </el-col>
      </el-row>
      <el-steps :active="1" align-center>
        <el-step title="创建任务"></el-step>
        <el-step title="分配任务"></el-step>
      </el-steps>
      <el-form
        ref="form"
        :model="form.bizEnterCheck"
        label-width="380px"
        style="margin-top: 50px; margin-right: 730px"
        :rules="rules"
      >
        <el-form-item label="检查类型" prop="checkType">
          <treeselect
            style="width: 520px"
            v-model="form.bizEnterCheck.checkType"
            :options="deptOptions"
            :default-expand-level="100"
            placeholder="请选择检查类型"
          />
        </el-form-item>
        <el-form-item label="任务名称" prop="checkName">
          <el-input v-model="form.bizEnterCheck.checkName"></el-input>
        </el-form-item>
        <el-form-item label="检查依据" prop="checkBasis">
          <el-radio-group v-model="form.bizEnterCheck.checkBasis">
            <el-radio label="1">自由检查</el-radio>
            <el-radio label="2">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="检查说明">
          <el-input
            type="textarea"
            v-model="form.bizEnterCheck.checkExplain"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Next"> 下一步 </el-button>
          <el-button type="info" @click="delRouter"> 关闭 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <el-steps :active="2" align-center>
        <el-step title="创建任务"></el-step>
        <el-step title="分配任务"></el-step>
      </el-steps>
      <el-row :gutter="10" class="mb8">
        <el-col :span="22">
          <el-form label-width="100px">
            <el-form-item label="任务分配类型">
              <el-radio-group v-model="form.bizEnterCheck.checkClassify">
                <el-radio label="1">按项目</el-radio>
                <el-radio label="2">按检查组</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="handleAdd">新增检查任务</el-button>
        </el-col>
      </el-row>

      <el-table :data="form.bizEnterCheckProject">
        <el-table-column v-if="form.bizEnterCheck.checkClassify == '1'" label="序号" align="center" type="index" />
        <el-table-column
          label="分组"
          align="center"
          prop="groupName"
          v-if="form.bizEnterCheck.checkClassify == '2'"
          :key="1"
        />
        <el-table-column label="检查项目" align="center" prop="checkProjectIds">
          <template slot-scope="scope">
            <div v-for="item in scope.row.checkProjectIds" :key="item.id">
              {{ item.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="计划开始检查时间"
          align="center"
          prop="dataTime"
          width="380"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.dataTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="检查组长" align="center" prop="groupLeader">
          <template slot-scope="scope">
            <div v-for="item in scope.row.groupLeader" :key="item.userId">
              {{ item.nickName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="参检人员" align="center" prop="groupMember">
          <template slot-scope="scope">
            <div v-for="item in scope.row.groupMember" :key="item.userId">
              {{ item.nickName }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['enterCheckProject:enterCheckProject:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :span="1.5">
          <el-button type="primary" @click="enterStatus = 'enter'"
            >上一步</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="submitForm">发送任务</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="delRouter">关闭</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 添加或修改企业检查-项目对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form
        ref="rulesTable"
        :model="form"
        label-width="100px"
        :rules="rules"
        style="margin-right: 100px"
      >
        <el-form-item
          label="分组名称"
          prop="groupName"
          v-if="form.bizEnterCheck.checkClassify == '2'"
        >
          <el-input
            v-model="form.groupName"
            placeholder="请输入分组名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="检查项目" :rules="{ required: true,message: '请选择检查项目',trigger: ['change', 'blur']}">
          <el-input
            v-model="tableDataText"
            @click.native.stop="inputClickdata('请选择检查项目')"
            placeholder="请选择检查项目"
          ></el-input>
        </el-form-item>
        <el-form-item label="计划检查时间">
          <el-date-picker
            v-model="form.dataTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="检查组长" prop="groupLeader">
          <el-input
            v-model="tablePeopleDataText"
            placeholder="请选择检查组长"
            @click.native.stop="inputClickdata('请选择检查组长')"
          ></el-input>
        </el-form-item>
        <el-form-item label="参检人员" prop="groupMember">
          <template slot-scope=""> </template>
          <el-input
            v-model="tableZyPeopleDataText"
            placeholder="请选择参检人员"
            @click.native.stop="inputClickdata('请选择参检人员')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitVisible">保存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
      <el-dialog
        width="70%"
        :title="innerTitle"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div class="dialog-box">
          <div style="height: 100%; width: 27%; border-right: 1px solid">
            <div
              style="
                width: 100%;
                background: rgb(239, 239, 239);
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                font-size: 15px;
              "
            >
              选择单位
            </div>
            <div>
              <el-tree
                :data="deptOptionsInner"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                node-key="id"
                default-expand-all
                highlight-current
                @node-click="handleNodeClick"
              />
            </div>
          </div>
          <div style="height: 100%; width: 50%; border-right: 1px solid">
            <div v-if="innerTitle == '请选择检查项目'">
              <div
                style="
                  width: 100%;
                  background: rgb(239, 239, 239);
                  height: 40px;
                  line-height: 40px;
                  padding-left: 10px;
                  font-size: 15px;
                "
              >
                选择单位
              </div>
              <el-table :data="tableData" style="width: 100%" height="457">
                <el-table-column prop="name" label="项目名称">
                </el-table-column>
                <el-table-column prop="deptName" label="所属单位">
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      v-if="scope.row.status"
                      @click="statusData(scope.row)"
                      :key="ikey"
                    >
                      添加
                    </el-button>
                    <el-button type="text" v-else :key="ikey">
                      已添加
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="innerTitle == '请选择检查组长'">
              <div
                style="
                  width: 100%;
                  background: rgb(239, 239, 239);
                  height: 40px;
                  line-height: 40px;
                  padding-left: 10px;
                  font-size: 15px;
                "
              >
                部门用户
              </div>
              <el-table
                :data="tablePeopleData"
                style="width: 100%"
                height="457"
              >
                <el-table-column prop="nickName" label="姓名">
                </el-table-column>
                <el-table-column prop="phonenumber" label="手机号">
                </el-table-column>
                <el-table-column prop="phonenumber" label="手机号" v-if="false">
                </el-table-column>
                <el-table-column prop="dept.deptName" label="部门">
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      v-if="scope.row.status"
                      @click="statusZzData(scope.row)"
                    >
                      添加
                    </el-button>
                    <el-button type="text" v-else> 已添加 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="innerTitle == '请选择参检人员'">
              <div
                style="
                  width: 100%;
                  background: rgb(239, 239, 239);
                  height: 40px;
                  line-height: 40px;
                  padding-left: 10px;
                  font-size: 15px;
                "
              >
                部门用户
              </div>
              <el-table
                :data="tableZyPeopleData"
                style="width: 100%"
                height="457"
              >
                <el-table-column prop="nickName" label="姓名">
                </el-table-column>
                <el-table-column prop="phonenumber" label="手机号">
                </el-table-column>
                <el-table-column prop="phonenumber" label="手机号" v-if="false">
                </el-table-column>
                <el-table-column prop="dept.deptName" label="部门">
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      v-if="scope.row.status"
                      @click="statusZyData(scope.row)"
                    >
                      添加
                    </el-button>
                    <el-button type="text" v-else> 已添加 </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div style="height: 100%; width: 23%">
            <div v-if="innerTitle == '请选择检查项目'">
              <div
                style="
                  width: 100%;
                  background: rgb(239, 239, 239);
                  height: 40px;
                  line-height: 40px;
                  padding-left: 10px;
                  font-size: 15px;
                "
              >
                已选择项目({{ innerTableData.length }})
                <el-button size="mini" @click="del" style="margin-left: 40%">
                  清 空
                </el-button>
              </div>
              <el-table :data="innerTableData" style="width: 100%">
                <el-table-column prop="name" label="项目名称">
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="statusDataUpdate(scope.row)"
                      :key="ikey"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="innerTitle == '请选择检查组长'">
              <div
                style="
                  width: 100%;
                  background: rgb(239, 239, 239);
                  height: 40px;
                  line-height: 40px;
                  padding-left: 10px;
                  font-size: 15px;
                "
              >
                已选择检查组长({{ innerZzTableData.length }})
                <el-button size="mini" @click="delZz" style="margin-left: 30%">
                  清 空
                </el-button>
              </div>
              <el-table :data="innerZzTableData" style="width: 100%">
                <el-table-column prop="nickName" label="姓名">
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="statusZzDataUpdate(scope.row)"
                      :key="ikey"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-if="innerTitle == '请选择参检人员'">
              <div
                style="
                  width: 100%;
                  background: rgb(239, 239, 239);
                  height: 40px;
                  line-height: 40px;
                  padding-left: 10px;
                  font-size: 15px;
                "
              >
                已选择参检人员({{ innerZyTableData.length }})
                <el-button size="mini" @click="delZy" style="margin-left: 30%">
                  清 空
                </el-button>
              </div>
              <el-table :data="innerZyTableData" style="width: 100%">
                <el-table-column prop="nickName" label="姓名">
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="statusZyDataUpdate(scope.row)"
                      :key="ikey"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveInnerVisible">保存</el-button>
          <el-button @click="innerVisibleDel">取 消</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getTree,
  getdeptTree,
  getTableData,
  getPeopleData,
  addPeopleData,
} from "@/api/biz/enter/enterNext";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  data() {
    return {
 
      ikey: 0,
      //状态控制
      enterStatus: "enter",
      // 遮罩层
      loading: true,
      // 企业检查-项目表格数据
      enterCheckProjectList: [],
      enterCheckProjectListData: [],
      // 弹出层标题
      title: "",
      innerTitle: "",
      // 是否显示弹出层
      open: false,
      innerVisible: false,
      // 表单参数
      form: {
        bizEnterCheck: {
          checkClassify: "1", //任务分配类型
          checkType: null, //检查类型
          checkName: null, //任务名称
          checkExplain: null, //检查说明
          checkBasis: null, //检查依据
          checkProjectIds: this.$store.state.app.selectData, //检查项目
        },
        bizEnterCheckProject: [
          // {
          //   checkProjectIds: [], //所选项目
          //   groupLeader:[], //组长，
          //   groupMember:[], //组员
          //   createTime:null, //开始时间
          //   planEndTime:null, //结束时间
          // }
        ],
        dataTime: null,
        // bizEnterTask: [],
      },
      // 部门树选项
      deptOptions: [],
      typeNoData: {
        checkTypeNo: null,
      },
      deptOptionsInner: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      //项目
      tableData: [],
      tableDataText: null,
      innerTableData: [],
      innerTableDataList: [],
      //检查组长
      tablePeopleData: [],
      tablePeopleDataText: null,
      innerZzTableData: [],
      innerZzTableDataList: [],
      //检查组员
      tableZyPeopleData: [],
      tableZyPeopleDataText: null,
      innerZyTableData: [],
      innerZyTableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: this.$store.state.app.selectData,
      },
      rules: {
        checkType: [
          { required: true, message: "请选择检查类型", trigger: "change" },
        ],
        checkName: [
          { required: true, message: "请输入任务名称", trigger: "blue" },
        ],
        checkBasis: [
          { required: true, message: "请选择检查依据", trigger: "change" },
        ],
        checkProjectIds: [
          { required: true, message: "请选择检查项目", trigger: "blue" },
        ],
        
      },
      rulesTable:{
        tableDataText: [
          {
            required: true,
            message: "请选择检查项目",
            trigger: ["change", "blur"],
          },
        ],
      }
    };
  },

  methods: {
    /** 查询企业检查-项目列表 */
    getList() {
      getTree(this.typeNoData).then((response) => {
        this.deptOptions = response.data;
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "新建检查任务";
      this.innerTableData = [];
      this.innerZzTableData = [];
      this.innerZyTableData = [];
      this.tableDataText = null; //项目
      this.tablePeopleDataText = null; //组长
      this.tableZyPeopleDataText = null; //组员
      this.form.dataTime = null; //时间
      // this.form.checkProjectIds = [];
      // this.form.groupLeader = [];
      // this.form.groupMember = [];
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.form.bizEnterCheckProject = this.form.bizEnterCheckProject.filter((item) => item !=row)
    },
    // 下一步
    Next() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.enterStatus = "next";
        }
      });
      // 1、页面绑定form.bizEnterCheck对象里面
      // 2、进入新页面，表格绑定 form.bizEnterCheckProject 数组
      // 3、点击新增，进入新增 -- 项目、组长、组员、时间 将这四个值分别创建对象进行绑定；展示的是name但是存储的需要是id，需要考虑表格渲染的时候，行内修改，
      // 4、点击新增确定后 将这四个值放入到form.bizEnterCheckProject里面、并将某属性改为fales；
      // 5、点击删除时候，在form.bizEnterCheckProject中找到这个对象，然后删除
      // 6、点击切换任务分配类型时候，清空上个页面存储的数据并提醒是否切换，切换后将清空当前页面数据
    },
    //关闭
    delRouter() {
      this.$router.push({ name: "Enter" });
      this.$store.state.tagsView.visitedViews =
        this.$store.state.tagsView.visitedViews.filter(
          (item) => item.name !== "enterNext"
        );
    },
    //输入框点击事件
    inputClickdata(data) {
      if (data == "请选择检查项目") {
        getTableData().then((data) => {
          this.tableData = data.rows;
          this.tableData.forEach((item) => {
            item.status = true;
          });
          if (this.innerTableData.length == 0) {
            this.innerTableData = this.innerTableDataList
          }
          for (let i = 0; i < this.tableData.length; i++) {
            for (let a = 0; a < this.innerTableData.length; a++) {
              if (this.tableData[i].id == this.innerTableData[a].id) {
                this.tableData[i].status = false;
              }
            }
          }
        });
        this.innerTableDataList = [...this.innerTableData]
      } else if (data == "请选择检查组长") {
        getPeopleData().then((data) => {
          this.tablePeopleData = data.rows;
          this.tablePeopleData.forEach((item) => {
            item.status = true;
          });
          if (this.innerZzTableData.length == 0) {
            this.innerZzTableData = this.innerZzTableDataList
          }
          for (let i = 0; i < this.tablePeopleData.length; i++) {
            for (let a = 0; a < this.innerZzTableData.length; a++) {
              if (
                this.tablePeopleData[i].userId ==
                this.innerZzTableData[a].userId
              ) {
                this.tablePeopleData[i].status = false;
              }
            }
          }
        });
        this.innerZzTableDataList = [...this.innerZzTableData]
      } else {
        getPeopleData().then((data) => {
          this.tableZyPeopleData = data.rows;
          this.tableZyPeopleData.forEach((item) => {
            item.status = true;
          });
          for (let i = 0; i < this.tableZyPeopleData.length; i++) {
            for (let a = 0; a < this.innerZyTableData.length; a++) {
              if (
                this.tableZyPeopleData[i].userId ==
                this.innerZyTableData[a].userId
              ) {
                this.tableZyPeopleData[i].status = false;
              }
            }
          }
        });
        this.innerZyTableDataList = [...this.innerZyTableData]
      }
      this.innerVisible = true;
      this.innerTitle = data;
      getdeptTree().then((dept) => {
        this.deptOptionsInner = dept.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (this.innerTitle == "请选择检查项目") {
        let signingDept = {
          signingDept: data.id,
        };
        getTableData(signingDept).then((data) => {
          this.tableData = data.rows;
          this.tableData.forEach((item) => {
            item.status = true;
          });
          for (let i = 0; i < this.tableData.length; i++) {
            for (let a = 0; a < this.innerTableData.length; a++) {
              if (this.tableData[i].id == this.innerTableData[a].id) {
                this.tableData[i].status = false;
              }
            }
          }
        });
      } else if (this.innerTitle == "请选择检查组长") {
        let deptId = {
          deptId: data.id,
        };
        getPeopleData(deptId).then((data) => {
          this.tablePeopleData = data.rows;
          this.tablePeopleData.forEach((item) => {
            item.status = true;
          });
          for (let i = 0; i < this.tablePeopleData.length; i++) {
            for (let a = 0; a < this.innerZzTableData.length; a++) {
              if (
                this.tablePeopleData[i].userId ==
                this.innerZzTableData[a].userId
              ) {
                this.tablePeopleData[i].status = false;
              }
            }
          }
        });
      }else{
        let deptId = {
          deptId: data.id,
        };
        getPeopleData(deptId).then((data) => {
          this.tableZyPeopleData = data.rows;
          this.tableZyPeopleData.forEach((item) => {
            item.status = true;
          });
          for (let i = 0; i < this.tableZyPeopleData.length; i++) {
            for (let a = 0; a < this.innerZyTableData.length; a++) {
              if (
                this.tableZyPeopleData[i].userId ==
                this.innerZyTableData[a].userId
              ) {
                this.tableZyPeopleData[i].status = false;
              }
            }
          }
        });
      }
    },
    //点击项目添加
    statusData(row) {
      this.tableData.forEach((item) => {
        if (item.id == row.id) {
          item.status = false;
          this.innerTableData.push(item);
          this.ikey += 1;
          // this.$forceUpdate();
        }
      });
    },
    //点击组长添加
    statusZzData(row) {
      this.tablePeopleData.forEach((item) => {
        if (item.userId == row.userId) {
          item.status = false;
          this.innerZzTableData.push(item); //组长
          this.innerZyTableData.push(item); //选中组长，将组长也同时放到组员里面
          this.ikey += 1;
          // this.$forceUpdate();
        }
      });
    },
    //点击组员添加
    statusZyData(row) {
      this.tableZyPeopleData.forEach((item) => {
        if (item.userId == row.userId) {
          item.status = false;
          this.innerZyTableData.push(item);
          this.ikey += 1;
          // this.$forceUpdate();
        }
      });
    },
    //点击项目删除
    statusDataUpdate(row) {
      this.tableData.forEach((item) => {
        if (item.id == row.id) {
          item.status = true;
          this.ikey += 1;
          // this.$forceUpdate();
        }
      });
      this.innerTableData = this.innerTableData.filter((item) => item != row);
    },
    //点击组长删除
    statusZzDataUpdate(row) {
      this.tablePeopleData.forEach((item) => {
        if (item.userId == row.userId) {
          item.status = true;
          this.ikey += 1;
          // this.$forceUpdate();
        }
      });
      this.innerZzTableData = this.innerZzTableData.filter(
        (item) => item != row
      );
      this.innerZyTableData.forEach((item) => {
        if (item.userId == row.userId) {
          this.innerZyTableData = this.innerZyTableData.filter(
            (item) => item != row
          );
        }
      });
    },
    //点击组员删除
    statusZyDataUpdate(row) {
      this.tableZyPeopleData.forEach((item) => {
        if (item.userId == row.userId) {
          item.status = true;
          this.ikey += 1;
          // this.$forceUpdate();
        }
      });
      this.innerZyTableData = this.innerZyTableData.filter(
        (item) => item != row
      );
    },
    //项目清空数据
    del() {
      this.innerTableData = [];
      this.tableData.forEach((item) => {
        item.status = true;
        this.ikey += 1;
        // this.$forceUpdate();
      });
    },
    //组长清空数据
    delZz() {
      this.innerZzTableData = [];
      this.tablePeopleData.forEach((item) => {
        item.status = true;
        this.ikey += 1;
        // this.$forceUpdate();
      });
    },
    //组员清空数据
    delZy() {
      this.innerZyTableData = [];
      this.tableZyPeopleData.forEach((item) => {
        item.status = true;
        this.ikey += 1;
        // this.$forceUpdate();
      });
    },
    //取消
    innerVisibleDel() {
      if (this.innerTitle == "请选择检查项目") {
        this.innerTableData = [];
      } else if (this.innerTitle == "请选择检查组长") {
        this.innerZzTableData = [];
      } else if (this.innerTitle == "请选择参检人员") {
        this.innerZyTableData = [];
      }
      this.innerVisible = false;
    },
    //弹框保存
    saveInnerVisible() {
      if (this.innerTitle == "请选择检查项目") {
        this.innerTableDataList = [...this.innerTableData]
        this.tableDataText = this.innerTableData.map((el) => el.name).join(", "); //项目
      }else if (this.innerTitle == "请选择检查组长") {
        this.innerZzTableDataList = [...this.innerZzTableData]
        this.tablePeopleDataText = this.innerZzTableData
        .map((el) => el.nickName)
        .join(", "); //组长


        this.innerZyTableDataList = [...this.innerZzTableData]
        this.tableZyPeopleDataText = this.innerZzTableData
        .map((el) => el.nickName)
        .join(", "); //组员
      }else if (this.innerTitle == "请选择参检人员") {
        this.innerZyTableDataList = [...this.innerZyTableData]
        this.tableZyPeopleDataText = this.innerZyTableData
        .map((el) => el.nickName)
        .join(", "); //组员
      }
      this.innerVisible = false; //关闭弹框
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    // 最外层 保存按钮   在这里对数据进行集中操作
    submitVisible() {
      this.$refs.rulesTable.validate((valid) => {
        if (valid) {
          let data = {
            checkProjectIds: this.innerTableData, //所选项目
            groupLeader: this.innerZzTableData, //组长，
            groupMember: this.innerZyTableData, //组员
            dataTime: this.form.dataTime,
            groupName: this.form.groupName
          };
          this.form.bizEnterCheckProject.push(data);
          this.open = false;
        }
      });
    },
    /** 发送任务按钮 */
    submitForm() {
      let data = {
        bizEnterCheck: null,
        bizEnterCheckProject: null,
        // bizEnterTask: [],
      };
      data.bizEnterCheck = this.form.bizEnterCheck;
      data.bizEnterCheckProject = this.form.bizEnterCheckProject;
      for (let i = 0; i < data.bizEnterCheckProject.length; i++) {
        for (
          let a = 0;
          a < data.bizEnterCheckProject[i].checkProjectIds.length;
          a++
        ) {
          data.bizEnterCheckProject[i].checkProjectIds[a] =
            data.bizEnterCheckProject[i].checkProjectIds[a].id;
        }
        for (
          let a = 0;
          a < data.bizEnterCheckProject[i].groupLeader.length;
          a++
        ) {
          data.bizEnterCheckProject[i].groupLeader[a] =
            data.bizEnterCheckProject[i].groupLeader[a].userId;
        }
        for (
          let a = 0;
          a < data.bizEnterCheckProject[i].groupMember.length;
          a++
        ) {
          data.bizEnterCheckProject[i].groupMember[a] =
            data.bizEnterCheckProject[i].groupMember[a].userId;
        }
        data.bizEnterCheckProject[i].checkProjectIds =
          data.bizEnterCheckProject[i].checkProjectIds.toString();
        data.bizEnterCheckProject[i].groupLeader =
          data.bizEnterCheckProject[i].groupLeader.toString();
        data.bizEnterCheckProject[i].groupMember =
          data.bizEnterCheckProject[i].groupMember.toString();
        data.bizEnterCheckProject[i].planStartTime =
          data.bizEnterCheckProject[i].dataTime[0];
        data.bizEnterCheckProject[i].planEndTime =
          data.bizEnterCheckProject[i].dataTime[1];
        data.bizEnterCheckProject[i].dataTime = null;
      }
      addPeopleData(data).then((data) => {
        this.$router.push({ name: "Enter" });
        this.$store.state.tagsView.visitedViews =
          this.$store.state.tagsView.visitedViews.filter(
            (item) => item.name !== "enterNext"
          );
      });
    },
  },

  components: {
    Treeselect,
  },

  computed: {
    ...mapState(["app"]),
    watchClassify(){
      return this.form.bizEnterCheck.checkClassify
    }
  },

  created() {
    this.getList();
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        if (oldVal.name == "enterNext") {
          this.$store.state.tagsView.visitedViews =
            this.$store.state.tagsView.visitedViews.filter(
              (item) => item.name !== "enterNext"
            );
        }
      },
      deep: true,
    },
    app: {
      handler(newVal, oldVal) {
        this.form.bizEnterCheck.checkProjectIds = newVal.selectData;
        this.getList();
      },
      deep: true,
    },
    watchClassify: {
      handler(newVal, oldVal) {
        this.bizEnterCheckProject = [];
        this.form.bizEnterCheckProject = [];
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.dialog-box {
  height: 500px;
  border: 1px solid #000;
  display: flex;
}
</style>
